<%-- 
    Document   : home
    Created on : 3 Aug, 2013, 7:54:28 PM
    Author     : Andree
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>

<link rel="stylesheet" href="css/style.default.css" type="text/css" />

<link rel="stylesheet" href="css/responsive-tables.css" />

<!--Design Template Paths-->
<link rel="stylesheet" href="style.css" />
<!--End of Design Template Paths-->

<!--Dialog box Paths-->
<!-- <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
            <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
            <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>-->
<link rel="stylesheet" href="jquery-ui.css" />
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui.js"></script>
<!--End Dialog box Paths-->

<!--Start Variable to check all are non-mergable nodes -->
<script>
	var count = 0;
	var isNonMergable;
	var isAlreadyMerged;
</script>
<!--End Variable to check all are non-mergable nodes -->

<!--Tree View Paths-->

<!--Tree View Paths-->
<link rel="stylesheet" href="jquery.treeview.css" />
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/red-treeview.css" />
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/screen.css" />
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/jquery.contextMenu.css" />

<script src="${pageContext.request.contextPath}/js/jquery.cookie.js"
	type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/jquery.treeview.js"
	type="text/javascript"></script>
<script
	src="${pageContext.request.contextPath}/js/jquery.treeview.edit.js"
	type="text/javascript"></script>
<script
	src="${pageContext.request.contextPath}/js/jquery.treeview.async.js"
	type="text/javascript"></script>
<script
	src="${pageContext.request.contextPath}/js/jquery.contextMenu.js"
	type="text/javascript"></script>
<!--End Tree View Paths-->

<!--File upload Paths-->
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery.form.js"></script>
<!--End File upload Paths-->

<script src="${pageContext.request.contextPath}/js/block-ui.js"
	type="text/javascript"></script>

<script>
	var text = "";
	var oldDataSource = "";
	var oldOperator = "";
	var oldEnteredValue = "";
	var tempText = "";
	var tempText2 = "";
	var isExecuted;
	var isExecuted2;
	var bottomValue = 130;
	var bottomValue2 = 250;
	var bottomValue3 = 18;
	var bottomValue4 = 50;
	var bottomValue5 = 166;
	var topValue = 105;
	var topValue2 = 20;
	var topValue3 = 255;
	var topValue4 = 255;
	var topValue5 = 70;
	var isAlreadyMergedExecutedForCount;
	var isAlreadyMergedExecutedForNoCount;
	var selectedDatabase;
	var newQueryTab = "";
	var newQueryTabIDCount = 0;
	var isGreaterTabFound;
	var isLesserTabFound;
	var isLastTab;
	var currentActiveTab = "";
	//var isNonMergable;

	$(document).ready(function() {

		$("#newQueryDrop").hide();
		$('#valueSubmitDrop').hide();
		$('#visual').hide();
		$('#runBtn').hide();
		$('#load-message').hide();
	});

	function openDialog() {
		//alert("Clicked");
		$("#dialog-form").dialog("open");
	}

	function getDatabaseInfo() {
		$("#dialog-form").dialog("close");
		var hostName = $('#hostId').val();
		var dbName = $('#dbNameId').val();
		var userName = $('#userNameId').val();
		var password = $('#pwdId').val();
		var dataSource = $('#dsId').val();
		var criteriaValue = "ADDDATABASE";

		$
				.get(
						'controller',
						{
							host : hostName,
							db : dbName,
							user : userName,
							pwd : password,
							ds : dataSource,
							criteria : criteriaValue
						},
						function(str) {

							var indexOfHash = str.indexOf("#");

							//alert(indexOfHash2);
							var selectOption = "<select id='selectDB' onchange='selectedDB(this.value)'>";
							var str2 = str.substring(0, indexOfHash);
							selectOption += "<option value="+str2+">" + str2
									+ "</option>"
							//alert("len = "+str2.length);    
							str = str.substring(indexOfHash + 1, str.length);
							//alert(str);
							createDatabaseList(str, selectOption);

						});
	}

	function createDatabaseList(str, selectOption) {
		var index = str.indexOf("#");
		if (index > 1) {
			var str3 = str.substring(0, index);
			selectOption += "<option value="+str3+">" + str3 + "</option>"
			str = str.substring(index + 1, str.length);
			createDatabaseList(str, selectOption);
		} else {
			selectOption = selectOption + " " + str;
			selectOption += "<option value="+str+">" + str + "</option>"
			selectOption += "</select>";
			$("#firstSelect").hide();
			$("#secondSelect").html(selectOption);
			$("#black").empty();
			initTrees();
		}
	}

	function initTrees() {
		//alert("Tree Called");
		$("#black").empty();
		$("#black").treeview({
			url : "controller"
		})
	}

	function initQueryTree() {
		//alert("InitQueryTree Called");
		$("#newQueryDrop").empty();
		$("#newQueryDrop").treeview({
			url : "resultTree"
		})
	}

	function loadFinalTree() {
		var criteriaValue = "LOAD_FINAL_TREE";
		$.get('controller', {
			criteria : criteriaValue,
			visualText : text
		}, function(responseText) {

			initValueTree();
		});
	}

	function initValueTree() {
		//alert("value tree called");
		$("#valueResultID").empty();
		$("#valueResultID").treeview({
			url : "valueTree"
		})
	}

	function selectDoc() {
		var criteriaValue = "ADDDOCUMENT";

		$.get('controller', {
			criteria : criteriaValue
		}, function(responseText) {
			//alert("Document added Succesfully");                               
		});
	}

	function selectedDB(selectedDb) {
		selectedDatabase = selectedDb;
		var criteriaValue = "SELECTEDATABASE";

		$.get('controller', {
			database : selectedDb,
			criteria : criteriaValue
		}, function(responseText) {
			$("#black").empty();
			initTrees();
		});
	}

	function isNumeric(n) {
		return !isNaN(parseFloat(n)) && isFinite(n);
	}
	
		
	
	function getLeafValue(isSummit) {
		var initDataSourceValue = $('#initDataSourceValue').val();
		var currentDataSourceValue = $('#currentDataSourceValue').val();
		if (initDataSourceValue != currentDataSourceValue&&!isSummit) {
			$('#initDataSource').empty();
			$('#currentDataSource').empty();
			$('[id="'+initDataSourceValue+'"]').clone().appendTo('#initDataSource');
			$('#initDataSource').treeview({
				url : "controller"
			});
			$('[id="'+currentDataSourceValue+'"]').clone().appendTo(
					'#currentDataSource');
			$('#currentDataSource').treeview({
				url : "controller"
			});
			$("#initDataSource li").click(function(){
				//$("#initDataSource li").removeClass("selected");
				var kids=$(this).children();
				if(kids.length==1){
					$(this).addClass("selected");
					$("#initDataSourceSelectedNode").val($(this).attr("id"));
					
				}
			});
			$("#currentDataSource li").click(function(){
				//$("#currentDataSource li").removeClass("selected");
				var kids=$(this).children();
				if(kids.length==1){
					$(this).addClass("selected");
					$("#currentDataSourceSelectedNode").val($(this).attr("id"));
				}
			});
			$("#searchValueLeaf-form").dialog("close");
			$("#joinDataSource").dialog("open");
		} else {
			var enteredValue = $('#valueId_2').val();
			var typeValue = $('#typeId_2').val();
			var operatorValue = $('#operatorId_2').val();

			if ((operatorValue == "operator3")
					|| (operatorValue == "operator4")
					|| (operatorValue == "operator5")
					|| (operatorValue == "operator6")) {
				if (!(isNumeric(enteredValue))) {
					alert("   Only numbers are allow for current operation option   ");
					return false;
				}
			}
			$("#searchValueLeaf-form").dialog("close");

			var criteriaValue = "SUBMITVALUE";

			$
					.get(
							'controller',
							{
								value : enteredValue,
								type : typeValue,
								operator : operatorValue,
								criteria : criteriaValue
							},
							function(responseText) {

								$('#visual').show();

								$("#visual").empty();

								var indexOfHash = responseText.indexOf("#");

								var dataSource = responseText.substring(
										indexOfHash + 1, responseText.length);

								var operator = "<img src='images/"
										+ responseText
												.substring(0, indexOfHash)
										+ ".png'/>";
								//var join="<img src='images/"+responseText.substring(0, indexOfHash)+".png'/>";

								//************** Start for two merge node and multiple single nodes(with final implementation)

								++count;
								if (count == 1) {
									//alert("if");
									text = "<div style='padding: 0 0 0 112px;text-align: left'><div id ='visual_1'><img src='images/initial_connector.png' /></div><div id ='visual_2'>"
											+ dataSource
											+ "</div><div id ='visual_3'>"
											+ operator
											+ "</div><div id ='visual_4'>"
											+ enteredValue + "</div></div>";
									oldDataSource = dataSource;
									oldOperator = operator;
									oldEnteredValue = enteredValue;
									$("#visual").html(text);
								} else if (isNonMergable) {
									if (isAlreadyMerged) {
										if (isAlreadyMergedExecutedForCount) {
											if (count < 5) {
												topValue2 += -37;
												topValue3 -= 35;
												text2 = "<div style='display: inline-block; position: relative; top: "+topValue3+"px; padding: 0 0 0 135px;text-align: left'><div id ='visual_2'>"
														+ dataSource
														+ "</div><div id ='visual_3'>"
														+ operator
														+ "</div><div id ='visual_4'>"
														+ enteredValue
														+ "</div></div>"
												text += "<div style='display: inline-block;position: relative;right : 50px; bottom: 42px;'>"
														+ text2 + "</div>"
												text += "<div style='position: relative; top: "+topValue2+"px; right: 238px'><img src='images/multiJoinLarge.png' /></div>"
											} else {
												bottomValue5 += 36;
												topValue5 -= 35;
												text2 = "<div style='display: inline-block; position: relative; top: "+topValue5+"px; padding: 0 0 0 135px;text-align: left'><div id ='visual_2'>"
														+ dataSource
														+ "</div><div id ='visual_3'>"
														+ operator
														+ "</div><div id ='visual_4'>"
														+ enteredValue
														+ "</div></div>"
												text += "<div style='display: inline-block;position: relative;right : 50px; bottom: 42px;'>"
														+ text2 + "</div>"
												text += "<div style='position: relative; bottom: "+bottomValue5+"px; right: 238px'><img src='images/multiJoinLarge.png' /></div>"
											}
										} else {
											text = tempText2;
											if (count < 5) {
												text2 = "<div style='display: inline-block; position: relative; top: 255px; right: 335px'><div id ='visual_2'>"
														+ dataSource
														+ "</div><div id ='visual_3'>"
														+ operator
														+ "</div><div id ='visual_4'>"
														+ enteredValue
														+ "</div></div>"
												text += "<div style='display: inline-block;position: relative;left: 148px; bottom: 42px;'>"
														+ text2 + "</div>"
												text += "<div style='position: relative; top: 20px; right: 238px'><img src='images/multiJoinLarge.png' /></div>"
											} else {
												text2 = "<div style='display: inline-block; position: relative; top: 70px; right: 150px'><div id ='visual_2'>"
														+ dataSource
														+ "</div><div id ='visual_3'>"
														+ operator
														+ "</div><div id ='visual_4'>"
														+ enteredValue
														+ "</div></div>"
												text += "<div style='display: inline-block;position: relative;left: 148px; bottom: 42px;'>"
														+ text2 + "</div>"
												text += "<div style='position: relative; bottom: 166px; right: 238px'><img src='images/multiJoinLarge.png' /></div>"
											}
											isAlreadyMergedExecutedForCount = true;
										}
									} else {
										text += "<div style='margin-top:-13px; padding: 0 0 0 112px;text-align: left'><div id='visual_1'><img src='images/multiJoin.png' /></div><div id ='visual_2'>"
												+ dataSource
												+ "</div><div id ='visual_3'>"
												+ operator
												+ "</div><div id ='visual_4'>"
												+ enteredValue + "</div></div>";
									}
									$("#visual").html(text);
								} else if (count == 2) {
									text = "";
									//alert("else if 1");
									for ( var i = 1; i <= count; i++) {
										if (i == 1) {
											text += "<div id='inner"+i+"' style='padding: 0 0 0 135px;text-align: left'><div style='display: inline-block;position: relative;top: 40px'><img src='images/mergeSmall1.png' /></div><div id ='visual_2'>"
													+ oldDataSource
													+ "</div><div id ='visual_3'>"
													+ oldOperator
													+ "</div><div id ='visual_4'>"
													+ oldEnteredValue
													+ "</div></div><br/>"
										} else {
											text += "<div id='inner"+i+"' style='margin-top:8px; padding: 0 0 0 135px;text-align: left'><div style='display: inline-block;position: relative'><img src='images/mergeSmall2.png' /></div><div id ='visual_2'>"
													+ dataSource
													+ "</div><div id ='visual_3'>"
													+ operator
													+ "</div><div id ='visual_4'>"
													+ enteredValue
													+ "</div></div>"
										}
									}
									tempText = text;
									text = text
											+ "<div style='bottom: 60px;position: relative;text-align: left;'><img src='images/initial_connector.png' /></div>";
									$("#visual").html(text);
								} else if (count == 3) {
									//alert("else if 2");
									text = "";
									text += "<div style='display: inline-block;position: relative;right: 238px; top: 209px'><img src='images/mergeLarge1.png' /></div>"
									text += "<div id='outer' style='display: inline-block;position: relative; right: 32px'>"
											+ tempText + "</div>"
									tempText = "";
									text += "<div style='position: relative;top: 56px; right: 237px;'><img src='images/mergeLarge2.png' /></div>"
									tempText = text;
									text += "<div style='display: inline-block; position: relative; top: 30px; left : 105px'><div id ='visual_2'>"
											+ dataSource
											+ "</div><div id ='visual_3'>"
											+ operator
											+ "</div><div id ='visual_4'>"
											+ enteredValue + "</div></div>"
									oldDataSource = dataSource;
									oldOperator = operator;
									oldEnteredValue = enteredValue;
									tempText2 = text;
									$("#visual").html(text);
								} else if (count == 4) {
									//alert("else if 3");
									text = "";
									text = tempText;
									tempText = "";
									for ( var i = 3; i <= 4; i++) {
										if (i == 3) {
											tempText += "<div id='inner"+i+"' style='padding: 0 0 0 135px;text-align: left'><div style='display: inline-block;position: relative;top: 40px'><img src='images/mergeSmall1.png' /></div><div id ='visual_2'>"
													+ oldDataSource
													+ "</div><div id ='visual_3'>"
													+ oldOperator
													+ "</div><div id ='visual_4'>"
													+ oldEnteredValue
													+ "</div></div><br/>"
										} else {
											tempText += "<div id='inner"+i+"' style='margin-top:8px;padding: 0 0 0 135px;text-align: left'><div style='display: inline-block;position: relative'><img src='images/mergeSmall2.png' /></div><div id ='visual_2'>"
													+ dataSource
													+ "</div><div id ='visual_3'>"
													+ operator
													+ "</div><div id ='visual_4'>"
													+ enteredValue
													+ "</div></div>"
										}
									}
									tempText = "<div id='outer"+count+"' style='display: inline-block;position: relative; right: 32px; bottom: 52px;'>"
											+ tempText + "</div>"
									text += tempText;
									tempText = text;
									$("#visual").html(text);
								} else {
									if (!isExecuted) {
										text2 = "<div style='display: inline-block; position: relative; top: 105px; right: 150px'><div id ='visual_2'>"
												+ dataSource
												+ "</div><div id ='visual_3'>"
												+ operator
												+ "</div><div id ='visual_4'>"
												+ enteredValue + "</div></div>"
										text += "<div style='display: inline-block;position: relative;left: 148px; bottom: 42px;'>"
												+ text2 + "</div>"
										text += "<div style='position: relative; bottom: 130px; right: 238px'><img src='images/multiJoinLarge.png' /></div>"
										tempText2 = text;
										oldDataSource = dataSource;
										oldOperator = operator;
										oldEnteredValue = enteredValue;
										isExecuted = true;
									} else if ((count % 2) == 1) {
										bottomValue += 155;

										if (!isExecuted2) {
											text2 = "<div style='display: inline-block; position: relative; bottom: 50px; right: 150px'><div id ='visual_2'>"
													+ dataSource
													+ "</div><div id ='visual_3'>"
													+ operator
													+ "</div><div id ='visual_4'>"
													+ enteredValue
													+ "</div></div>"
										} else if (isExecuted2) {
											bottomValue4 += 155;
											text2 = "<div style='display: inline-block; position: relative; bottom: "+bottomValue4+"px; right: 150px'><div id ='visual_2'>"
													+ dataSource
													+ "</div><div id ='visual_3'>"
													+ operator
													+ "</div><div id ='visual_4'>"
													+ enteredValue
													+ "</div></div>"
										}
										text += "<div style='display: inline-block;position: relative;left: 148px; bottom: 42px;'>"
												+ text2 + "</div>"
										text += "<div style='position: relative;bottom: "+bottomValue+"px;right: 238px'><img src='images/multiJoinLarge.png' /></div>"
										oldDataSource = dataSource;
										oldOperator = operator;
										oldEnteredValue = enteredValue;
										isExecuted2 = true;
									} else if (!isAlreadyMergedExecutedForNoCount) {
										text2 = "";
										for ( var i = 3; i <= 4; i++) {
											if (i == 3) {
												text2 = "<div id='inner"+i+"' style='padding: 0 0 0 135px;text-align: left'><div style='display: inline-block;position: relative;top: 40px'><img src='images/mergeSmall1.png' /></div><div id ='visual_2'>"
														+ oldDataSource
														+ "</div><div id ='visual_3'>"
														+ oldOperator
														+ "</div><div id ='visual_4'>"
														+ oldEnteredValue
														+ "</div></div><br/>"
											} else {
												text2 += "<div id='inner"+i+"' style='margin-top:8px;padding: 0 0 0 135px;text-align: left'><div style='display: inline-block;position: relative'><img src='images/mergeSmall2.png' /></div><div id ='visual_2'>"
														+ dataSource
														+ "</div><div id ='visual_3'>"
														+ operator
														+ "</div><div id ='visual_4'>"
														+ enteredValue
														+ "</div></div>"
											}
										}
										tempText += "<div id='outer"+count+"' style='display: inline-block;position: relative; right: 18px; bottom: 18px'>"
												+ text2 + "</div>"
										tempText += "<div style='position: relative; bottom: 250px; right: 238px'><img src='images/multiJoinLarge.png' /></div>"

										text = tempText;
										isAlreadyMergedExecutedForNoCount = true;
									} else if (isAlreadyMergedExecutedForNoCount) {
										bottomValue2 += 156;

										bottomValue3 += 156;
										text2 = "";
										for ( var i = 3; i <= 4; i++) {
											if (i == 3) {
												text2 = "<div id='inner"+i+"' style='padding: 0 0 0 135px;text-align: left'><div style='display: inline-block;position: relative;top: 40px'><img src='images/mergeSmall1.png' /></div><div id ='visual_2'>"
														+ oldDataSource
														+ "</div><div id ='visual_3'>"
														+ oldOperator
														+ "</div><div id ='visual_4'>"
														+ oldEnteredValue
														+ "</div></div><br/>"
											} else {
												text2 += "<div id='inner"+i+"' style='margin-top:8px;padding: 0 0 0 135px;text-align: left'><div style='display: inline-block;position: relative'><img src='images/mergeSmall2.png' /></div><div id ='visual_2'>"
														+ dataSource
														+ "</div><div id ='visual_3'>"
														+ operator
														+ "</div><div id ='visual_4'>"
														+ enteredValue
														+ "</div></div>"
											}
										}
										tempText += "<div id='outer"+count+"' style='display: inline-block;position: relative; right: 18px; bottom: "+bottomValue3+"px'>"
												+ text2 + "</div>"
										tempText += "<div style='position: relative; bottom: "+bottomValue2+"px; right: 238px'><img src='images/multiJoinLarge.png' /></div>"

										text = tempText;
									}
									$("#visual").html(text);
								}

								//End of two merge node and multiple single nodes (with final implementation) ************/

							});
		}
	}
	function getNonLeafValue() {
		var initDataSourceValue = $('#initDataSourceValue').val();
		var currentDataSourceValue = $('#currentDataSourceValue').val();
		if (initDataSourceValue != currentDataSourceValue) {
			$('#' + initDataSourceValue).clone().appendTo('#initDataSource');
			$('#' + currentDataSourceValue).clone().appendTo(
					'#currentDataSource');
			$("#searchValueNonLeaf-form").dialog("close");
			$("#joinDataSource").dialog("open");
		} else {
			$("#searchValueNonLeaf-form").dialog("close");

			var enteredValue = $('#valueId_1').val();
			var typeValue = $('#typeId_1').val();
			var operatorValue = $('#operatorId_1').val();

			var criteriaValue = "SUBMITVALUE";

			$
					.get(
							'controller',
							{
								value : enteredValue,
								type : typeValue,
								operator : operatorValue,
								criteria : criteriaValue
							},
							function(responseText) {

								$('#visual').show();

								$("#visual").empty();

								var indexOfHash = responseText.indexOf("#");

								var dataSource = responseText.substring(
										indexOfHash + 1, responseText.length);

								var operator = "<img src='images/"
										+ responseText
												.substring(0, indexOfHash)
										+ ".png'/>";

								++count;
								if (count == 1) {
									alert("if");
									text = "<div style='padding: 0 0 0 112px;text-align: left'><div id ='visual_1'><img src='images/initial_connector.png' /></div><div id ='visual_2'>"
											+ dataSource
											+ "</div><div id ='visual_3'>"
											+ operator
											+ "</div><div id ='visual_4'>"
											+ enteredValue + "</div></div>";
								} else {
									alert("else");
									text += "<div style='margin-top:-13px; padding: 0 0 0 112px;text-align: left'><div id='visual_1'><img src='images/multiJoin.png' /></div><div id ='visual_2'>"
											+ dataSource
											+ "</div><div id ='visual_3'>"
											+ operator
											+ "</div><div id ='visual_4'>"
											+ enteredValue + "</div></div>";
								}
								$("#visual").html(text);
							});
		}
	}
	function newQuery() {
		var criteriaValue = "NEWTAB_OR_TABSWITCHED";
		count = 0;
		isExecuted = false;
		isAlreadyMerged = false;
		isNonMergable = false;
		isAlreadyMergedExecutedForCount = false;
		isAlreadyMergedExecutedForNoCount = false;
		isGreaterTabFound = false;
		$('#runBtn').show();
		$("#ul_id").empty();
		++newQueryTabIDCount;
		newQueryTab += "<li id='menu_id_"
				+ newQueryTabIDCount
				+ "' class='nav-tab nav-tab-active' onclick='tab(this.id)'> Query "
				+ newQueryTabIDCount
				+ " <span id='span_id_"
				+ newQueryTabIDCount
				+ "' class='close_' onclick='deleteTab(this.id)'>&times;</span></li>";
		$("#ul_id").html(newQueryTab);

		$.get('controller', {
			criteria : criteriaValue,
			tabNumber : newQueryTabIDCount
		},
				function(responseText) {
					jQuery('.nav-tab').removeClass('nav-tab-active');
					jQuery("#menu_id_" + newQueryTabIDCount).addClass(
							'nav-tab-active');
					initQueryTree();
				});
		$("#visual").empty();
		criteriaValue = "NEWQUERY";
		$.get('controller', {
			criteria : criteriaValue
		}, function(responseText) {
			//alert("New Query Successfully");
			$("#newQueryDrop").empty();
			$("#valueResultID").empty();
			$("#visual_1").empty();
			$("#visual_2").empty();
			$("#visual_3").empty();
			$("#visual_4").empty();

			$("#newQueryDrop").show();
			$('#valueSubmitDrop').show();
		});
	}

	function tab(id) {
		count = 0;
		text = "";
		//alert("in tab before condition check greater = "+isGreaterTabFound+" lesser = "+isLesserTabFound+" last = "+isLastTab);
		if ((!isGreaterTabFound) && (!isLesserTabFound) && (!isLastTab)) {
			//alert("in tab select greater not found or less than not found");
			var tabNo = id.substring(8, id.length);
			var criteriaValue = "NEWTAB_OR_TABSWITCHED";
			$.get('controller', {
				criteria : criteriaValue,
				tabNumber : tabNo
			}, function(responseText) {
				jQuery('.nav-tab').removeClass('nav-tab-active');
				jQuery("#" + id).addClass('nav-tab-active');
				initQueryTree();
				initValueTree();
				$("#visual").html(responseText);
			});
		} else {
			//alert("greater or lesser or last found so skip tab select");
			isGreaterTabFound = false;
			isLesserTabFound = false;
			isLastTab = false;
		}
	}

	function deleteTab(id) {
		isGreaterTabFound = false;
		//delete selected tab
		$("#ul_id").empty();
		id = id.replace("span", "menu");
		var idIndex = newQueryTab.indexOf(id);
		var startIndex = idIndex - 8;
		var endIndex = newQueryTab.indexOf("</", startIndex);
		var tempStr = newQueryTab.substring(startIndex, endIndex + 12);
		newQueryTab = newQueryTab.replace(tempStr, "");
		$("#ul_id").html(newQueryTab);
		var tab = id.substring(8, id.length);
		var criteriaValue = "DELETETAB";
		$.get('controller', {
			criteria : criteriaValue,
			tabNumber : tab
		}, function(responseText) {
			//alert("delete response");
		});

		//active next tab
		var tabNo = parseInt(id.substring(8, id.length)) + 1;

		if (newQueryTab) {
			for ( var i = tabNo; i <= newQueryTabIDCount; i++) {
				var tempID = "menu_id_" + i;
				if (newQueryTab.contains(tempID)) {
					jQuery('.nav-tab').removeClass('nav-tab-active');
					setTimeout(function() {
						jQuery("#" + tempID).addClass('nav-tab-active');
					}, 500);
					var criteriaValue = "NEWTAB_OR_TABSWITCHED";
					$.get('controller', {
						criteria : criteriaValue,
						tabNumber : i
					}, function(responseText) {
						//alert("greater tab switch response");
						isGreaterTabFound = true;
						initQueryTree();
						initValueTree();
						$("#visual").html(responseText);
					});
					isGreaterTabFound = true;
					currentActiveTab = i;
					break;
				}
			}
			if (!isGreaterTabFound) {
				//alert();
				var tabNo = parseInt(id.substring(8, id.length)) - 1;
				for ( var i = tabNo; i >= 1; i--) {
					var tempID = "menu_id_" + i;
					if (newQueryTab.contains(tempID)) {
						jQuery('.nav-tab').removeClass('nav-tab-active');
						setTimeout(function() {
							jQuery("#" + tempID).addClass('nav-tab-active');
						}, 500);
						var criteriaValue = "NEWTAB_OR_TABSWITCHED";
						$.get('controller', {
							criteria : criteriaValue,
							tabNumber : i
						}, function(responseText) {
							//alert("lesser tab switch response");
							isLesserTabFound = true;
							initQueryTree();
							initValueTree();
							$("#visual").html(responseText);
						});
						isLesserTabFound = true;
						currentActiveTab = i;
						break;
					}
				}
			}
		} else {
			isLastTab = true;
			$("#newQueryDrop").hide();
			$('#valueSubmitDrop').hide();
			$('#valueResultID').empty();
			$('#runBtn').hide();
		}
	}

	function openDeleteDBDialog(db) {

		var criteriaValue = "DELETE_DATABASE_LIST";
		$.get('controller', {
			criteria : criteriaValue,
			database : db
		}, function(str) {

			var indexOfHash = str.indexOf("#");

			var selectOption = "<select id='deleteDB'>";
			var str2 = str.substring(0, indexOfHash);
			if (str2.length > 1)
				selectOption += "<option value="+str2+">" + str2 + "</option>"

			str = str.substring(indexOfHash + 1, str.length);

			createDatabaseListForDelete(str, selectOption);
		});
	}

	function createDatabaseListForDelete(str, selectOption) {

		var index = str.indexOf("#");
		if (index > 1) {
			var str3 = str.substring(0, index);
			selectOption += "<option value="+str3+">" + str3 + "</option>"
			str = str.substring(index + 1, str.length);
			createDatabaseListForDelete(str, selectOption);
		} else {
			selectOption = selectOption + " " + str;
			selectOption += "<option value="+str+">" + str + "</option>"
			selectOption += "</select>";
			$("#deleteDatabase-form").dialog("open");
			$("#deleteDBID").html(selectOption);

		}
	}

	function deleteDatabase() {
		var deleteSelectedDB = $('#deleteDB').val();
		//alert("delete db = "+deleteSelectedDB);
		var criteriaValue = "DELETE_DB";
		$
				.get(
						'controller',
						{
							criteria : criteriaValue,
							database : deleteSelectedDB
						},
						function(str) {
							//alert("Deleted Succesfully");
							$("#deleteDatabase-form").dialog("close");
							$("#black").empty();
							var indexOfHash = str.indexOf("#");

							//alert(indexOfHash2);
							var selectOption = "<select id='selectDB' onchange='selectedDB(this.value)'>";
							var str2 = str.substring(0, indexOfHash);
							if (str2.length > 1)
								selectOption += "<option value="+str2+">"
										+ str2 + "</option>"
								//alert("len = "+str2.length);    
							str = str.substring(indexOfHash + 1, str.length);
							//alert(str);
							createDatabaseListAfterDelete(str, selectOption);
						});
	}

	function createDatabaseListAfterDelete(str, selectOption) {
		var index = str.indexOf("#");
		if (index > 1) {
			var str3 = str.substring(0, index);
			selectOption += "<option value="+str3+">" + str3 + "</option>"
			str = str.substring(index + 1, str.length);
			createDatabaseListAfterDelete(str, selectOption);
		} else {
			selectOption = selectOption + " " + str;
			selectOption += "<option value="+str+">" + str + "</option>"
			selectOption += "</select>";
			$("#firstSelect").hide();
			$("#secondSelect").html(selectOption);
			$("#black").empty();
		}
	}

	function openAddDataSourceDialog() {
		if (selectedDatabase.match("No Database Selected") != null) {
			alert(" No Database Selected! ");
		} else {
			$("#addDataSource-form").dialog("open");
		}
	}

	function addDataSource() {
		$("#addDataSource-form").dialog("close");
		var dataSourceNm = $('#dataSourceName').val();
		var criteriaValue = "ADD_DATA_SOURCE";

		$.get('controller', {
			criteria : criteriaValue,
			dataSourceName : dataSourceNm
		}, function(responseText) {

			if (responseText.substring(0, 3) == "exp") {
				var indexOfHash = responseText.indexOf("#");
				var exceptionString = responseText.substring(indexOfHash + 1,
						responseText.length);
				alert(exceptionString);
			} else {
				//alert("DS Added success");
				initTrees();
			}
		});
	}

	function openDeleteDataSourceDialog() {
		var criteriaValue = "SELECT_DATA_SOURCES";
		$.get('controller', {
			criteria : criteriaValue
		}, function(responseText) {

			var indexOfHash = responseText.indexOf("#");

			var selectOption = "<select id='deleteDS'>";
			var str2 = responseText.substring(0, indexOfHash);
			if (str2.length > 1)
				selectOption += "<option value="+str2+">" + str2 + "</option>"

			responseText = responseText.substring(indexOfHash + 1,
					responseText.length);

			createDeleteDataSourceList(responseText, selectOption);

		});
	}

	function createDeleteDataSourceList(str, selectOption) {
		var index = str.indexOf("#");
		if (index > 1) {
			var str3 = str.substring(0, index);
			selectOption += "<option value="+str3+">" + str3 + "</option>"
			str = str.substring(index + 1, str.length);
			createDeleteDataSourceList(str, selectOption);
		} else {
			selectOption = selectOption + " " + str;
			selectOption += "<option value="+str+">" + str + "</option>"
			selectOption += "</select>";

			$("#deleteDataSource-form").dialog("open");
			$("#deleteDSList").html(selectOption);

		}
	}

	function deleteDataSource() {
		$("#deleteDataSource-form").dialog("close");
		var deleteSelectedDS = $('#deleteDS').val();
		//alert("delete db = "+deleteSelectedDB);
		var criteriaValue = "DELETE_DS";
		$.get('controller', {
			criteria : criteriaValue,
			datasource : deleteSelectedDS
		}, function(str) {
			//alert("ds deleted");
			initTrees();
		});
	}

	function openSelectDataSourceDialog() {

		var criteriaValue = "SELECT_DATA_SOURCES";
		$.get('controller', {
			criteria : criteriaValue
		}, function(responseText) {

			var indexOfHash = responseText.indexOf("#");

			var selectOption = "<select id='selectDS'>";
			var str2 = responseText.substring(0, indexOfHash);
			if (str2.length > 1)
				selectOption += "<option value="+str2+">" + str2 + "</option>"

			responseText = responseText.substring(indexOfHash + 1,
					responseText.length);

			createDataSourceList(responseText, selectOption);

		});
	}

	function createDataSourceList(str, selectOption) {
		var index = str.indexOf("#");
		if (index > 1) {
			var str3 = str.substring(0, index);
			selectOption += "<option value="+str3+">" + str3 + "</option>"
			str = str.substring(index + 1, str.length);
			createDataSourceList(str, selectOption);
		} else {
			selectOption = selectOption + " " + str;
			selectOption += "<option value="+str+">" + str + "</option>"
			selectOption += "</select>";

			$("#selectDataSource-form").dialog("open");
			$("#selectDSList").html(selectOption);

		}
	}

	function selectDataSource() {
		$("#selectDataSource-form").dialog("close");
		var selectedDS = $('#selectDS').val();
		$('#dataSourcelbl').text(selectedDS);
		var criteriaValue = "SELECTED_DATA_SOURCE";
		$.get('controller', {
			criteria : criteriaValue,
			selectedDS : selectedDS
		}, function(responseText) {
			$('#fileID').removeAttr('disabled');
			$('#upload-button').removeAttr('disabled');
		});
	}

	function isNodeExist() {
		alert("Node Existance");
	}

	function blockUI() {
		$.blockUI({
			message : $('#load-message')
		});
	}

	$(function() {

		$('#upload-form').ajaxForm({
			success : function(msg) {
				$(document).ajaxStop($.unblockUI);

				//window.location.reload(); 
				$('#fileID').val("");

				$('#dataSourcelbl').text("No DataSource Selected");

				$('#fileID').attr('disabled', 'disabled');
				$('#upload-button').attr('disabled', 'disabled');

				initTrees();
			},
			error : function(msg) {
				$("#upload-error").text("Couldn't upload file");
			}
		});
	});
</script>

<link rel="stylesheet" href="/resources/demos/style.css" />

<style>
body {
	font-size: 62.5%;
}

label,input {
	display: block;
}

input.text {
	margin-bottom: 12px;
	width: 95%;
	padding: .4em;
}

h1 {
	font-size: 1.2em;
	margin: .6em 0;
}

div#users-contain {
	width: 350px;
	margin: 20px 0;
}

div#users-contain table {
	margin: 1em 0;
	border-collapse: collapse;
	width: 100%;
}

div#users-contain table td,div#users-contain table th {
	border: 1px solid #eee;
	padding: .6em 10px;
	text-align: left;
}

.ui-dialog .ui-state-error {
	padding: .3em;
}

.validateTips {
	border: 1px solid transparent;
	padding: 0.3em;
}

div[id^="visual_2"] {
	background-color: aqua;
}
#initDataSource li,#currentDataSource li{background-color: white !important;}
#initDataSource .selected,#currentDataSource .selected{color: blue;font-weight: bold;}
#main span {
	color: #FFFFFF;
}

#newQueryDrop span {
	color: #FFFFFF;
}

#valueResultID span {
	color: #000000;
}

#valueResultID {
	list-style: none;
}

#newQueryDrop {
	border: 1px solid;
	font-size: 16px;
	height: 125px;
	width: 258px;
	overflow: auto;
	border-top: none;
	background: #000000;
}

#valueSubmitDrop {
	background: none repeat scroll 0 0;
	font-size: 16px;
	height: 800px;
	width: 100%;
	overflow: auto;
}

#visual {
	display: block;
	margin-top: 50px;
	width: -moz-max-content;
}

#visual_1 {
	display: inline-block;
	position: relative;
	top: 5px;
}

#visual_2 {
	display: inline-block;
	height: auto;
	position: relative;
}

#visual_3 {
	display: inline-block;
	position: relative;
	top: 4px;
	z-index: 10;
}

#visual_4 {
	display: inline-block;
	height: 25px;
	left: -2px;
	padding: 2px;
	position: relative;
}
</style>
<script>
	$(function() {
		var name = $("#name"), email = $("#email"), password = $("#password"), allFields = $(
				[]).add(name).add(email).add(password), tips = $(".validateTips");

		function updateTips(t) {
			tips.text(t).addClass("ui-state-highlight");
			setTimeout(function() {
				tips.removeClass("ui-state-highlight", 1500);
			}, 500);
		}

		function checkLength(o, n, min, max) {
			if (o.val().length > max || o.val().length < min) {
				o.addClass("ui-state-error");
				updateTips("Length of " + n + " must be between " + min
						+ " and " + max + ".");
				return false;
			} else {
				return true;
			}
		}

		function checkRegexp(o, regexp, n) {
			if (!(regexp.test(o.val()))) {
				o.addClass("ui-state-error");
				updateTips(n);
				return false;
			} else {
				return true;
			}
		}

		$("#dialog-form").dialog({
			autoOpen : false,
			height : 450,
			width : 500,
			modal : true,
			close : function() {
				allFields.val("").removeClass("ui-state-error");
			}
		});

		$("#searchValueLeaf-form").dialog({
			autoOpen : false,
			height : 410,
			width : 500,
			modal : true,
			close : function() {
				allFields.val("").removeClass("ui-state-error");
			}
		});

		$("#searchValueNonLeaf-form").dialog({
			autoOpen : false,
			height : 410,
			width : 500,
			modal : true,
			close : function() {
				allFields.val("").removeClass("ui-state-error");
			}
		});

		$("#deleteDatabase-form").dialog({
			autoOpen : false,
			height : 170,
			width : 400,
			modal : true,
			close : function() {
				allFields.val("").removeClass("ui-state-error");
			}
		});

		$("#addDataSource-form").dialog({
			autoOpen : false,
			height : 150,
			width : 400,
			modal : true,
			close : function() {
				allFields.val("").removeClass("ui-state-error");
			}
		});

		$("#selectDataSource-form").dialog({
			autoOpen : false,
			height : 170,
			width : 400,
			modal : true,
			close : function() {
				allFields.val("").removeClass("ui-state-error");
			}
		});

		$("#deleteDataSource-form").dialog({
			autoOpen : false,
			height : 170,
			width : 400,
			modal : true,
			close : function() {
				allFields.val("").removeClass("ui-state-error");
			}
		});
		$("#joinDataSource").dialog({
			autoOpen : false,
			height : 400,
			width : 500,
			modal : true,
			buttons : {
				"Submit" : function() {
					var criteriaValue="JOIN";
					var leftNode=$("#initDataSourceSelectedNode").val();
					var rightNode=$("#currentDataSourceSelectedNode").val();
					$.get('controller', {
						criteria:criteriaValue,
						leftJoinNode:leftNode,
						rightJoinNode:rightNode
					}, function(responseText) {
						$("#joinDataSource").dialog("close");
						getLeafValue(true)
						
					});
				},
				Cancel : function() {
					$(this).dialog("close");
				}
			},
			close : function() {
				allFields.val("").removeClass("ui-state-error");
			}
		})
		$("#new-database").button().click(function() {
			$("#dialog-form").dialog("open");
		});
	});
</script>

</head>
<body>

	<div class="mainwrapper">
		<input type="hidden" id="initDataSourceValue" /> <input type="hidden"
			id="currentDataSourceValue" />
		 <input type="hidden" id="initDataSourceSelectedNode" /> <input type="hidden"
			id="currentDataSourceSelectedNode" />
		<!--Dialog Boxes-->

		<div id="dialog-form" title="Add New Database">

			<form>

				<label for="host">Host Name</label> <input type="text" name="host"
					id="hostId" value="localhost"
					class="text ui-widget-content ui-corner-all" /> <label for="db">Database
					Name</label> <input type="text" name="db" id="dbNameId"
					value="databasename" class="text ui-widget-content ui-corner-all" />

				<label for="user">User Name</label> <input type="text" name="user"
					id="userNameId" value="sa"
					class="text ui-widget-content ui-corner-all" /> <label
					for="password">Password</label> <input type="password"
					name="password" id="pwdId" value="roshan14121987"
					class="text ui-widget-content ui-corner-all" /> <label for="ds">Data
					Source</label> <input type="text" name="ds" id="dsId"
					class="text ui-widget-content ui-corner-all" /> <label>Data
					source list, you may enter multiple names separated by ";" or leave
					this field blank. </label> <input type="button" value="OK"
					onclick="getDatabaseInfo()" />

			</form>

		</div>
		<!-- Dialog Box for Join datasource -->
		<div id="joinDataSource" title="join">
			<form>
				<table style="width: 100%">
					<tr>
						<td valign="top" style="width: 50%">
							<ul id="initDataSource" class="treeview">
							</ul>
						</td>
						<td valign="top" style="width: 50%">
							<ul id="currentDataSource" class="treeview">
							</ul>
						</td>
					</tr>
				</table>
			</form>
		</div>
		<!--  Dialog Box for Non Leaf Node -->
		<div id="searchValueNonLeaf-form" title="New Condition">

			<form>
				<label for="ds">Datasource</label> <input type="text" name="ds"
					id="datasource" value=""
					class="text ui-widget-content ui-corner-all" /> <label for="attr">Attribute</label>
				<input type="text" name="attr" id="nonLeafNode" value=" "
					disabled="true" class="text ui-widget-content ui-corner-all" /> <label
					for="type">Type</label> <select id="typeId_1" name="type"
					class="text ui-widget-content ui-corner-all">
					<option value="type2">Node Existence Search</option>
				</select> <label for="operator">Operator</label> <select id="operatorId_1"
					name="operator" disabled="true"
					class="text ui-widget-content ui-corner-all">
					<option value="operator0">N.A.</option>
				</select> <label for="val">Value</label> <input type="text" name="val"
					id="valueId_1" value="N.A." disabled="true"
					class="text ui-widget-content ui-corner-all" /> <input
					type="button" value="OK" onclick="getNonLeafValue()" />

			</form>

		</div>

		<!--  Dialog Box for Leaf Node -->
		<div id="searchValueLeaf-form" title="New Condition"
			style="height: 391px">

			<form>
				<label for="ds">Datasource</label> <input type="text" name="ds"
					id="datasource" value=""
					class="text ui-widget-content ui-corner-all" /> <label for="attr">Attribute</label>
				<input type="text" name="attr" id="leafNode" value=" "
					disabled="true" class="text ui-widget-content ui-corner-all" /> <label
					for="type">Type</label> <select id="typeId_2" name="type">
					<option value="type1">Keyword or Simple Comparison Search</option>
					<option value="type2" onselect="isNodeExist()">Node
						Existence Search</option>
				</select> <label for="operator">Operator</label> <select id="operatorId_2"
					name="operator">
					<option value="operator1">Equivalent to [your desired
						value]</option>
					<option value="operator2">Is not equivalent to [your
						desired value]</option>
					<option value="operator3">Greater than [your desired
						value] <<< have to be number</option>
					<option value="operator4">Greater than or equal to [your
						desired value] <<< must be number</option>
					<option value="operator5">Lesser than [your desired value]
						<<< have to be number</option>
					<option value="operator6">Lesser than or equal to [your
						desired value] <<< must be number</option>
					<option value="operator7">Containing [your desired value]</option>
				</select> <label for="val">Value</label> <input type="text" name="val"
					id="valueId_2" value=""
					class="text ui-widget-content ui-corner-all" />

				<div id="merge"></div>

				<input type="button" value="OK" onclick="getLeafValue(false)" />

			</form>

		</div>

		<div id="deleteDatabase-form" title="Delete Database">

			<form>

				<label for="type">Database :</label>
				<div id="deleteDBID"></div>
				<br /> <input type="button" value="OK" onclick="deleteDatabase()" />

			</form>

		</div>

		<div id="addDataSource-form" title="Add New Data Source">

			<form>

				<label for="attr">Data Source : </label> <input type="text"
					name="attr" id="dataSourceName" value="data source name......"
					class="text ui-widget-content ui-corner-all" /> <input
					type="button" value="OK" onclick="addDataSource()" />

			</form>

		</div>

		<div id="deleteDataSource-form" title="Delete Data Source">

			<form>

				<label for="attr">Data Source : </label>
				<div id="deleteDSList"></div>
				<br /> <input type="button" value="OK" onclick="deleteDataSource()" />

			</form>

		</div>

		<div id="selectDataSource-form" title="Select Data Source">

			<form>

				<label for="attr">Data Source : </label>
				<div id="selectDSList"></div>
				<br /> <input type="button" value="OK" onclick="selectDataSource()" />

			</form>

		</div>

		<!--End of Dialog Boxes-->

		<div class="header1">
			<div class="logo">
				<a href="dashboard.html"><img src="images/logo.png" alt="" /></a>
			</div>
			<div class="headerinner">
				<ul class="headmenu">
					<li class="odd"><a class="dropdown-toggle"
						data-toggle="dropdown" onclick="newQuery()"> <span
							class="head-icon head-message"></span> <span
							class="headmenu-label">New Query</span>
					</a></li>
					<li class="odd"><a class="dropdown-toggle"
						data-toggle="dropdown" data-target="#" onclick="openDialog()">

							<span class="head-icon head-users"></span> <span
							class="headmenu-label">Add Database</span>
					</a></li>
					<li class="odd"><a class="dropdown-toggle"
						data-toggle="dropdown" data-target="#"
						onclick="openDeleteDBDialog()"> <span
							class="head-icon head-bar"></span> <span class="headmenu-label">Delete
								Database</span>
					</a></li>
					<li class="odd"><a class="dropdown-toggle"
						data-toggle="dropdown" data-target="#"
						onclick="openAddDataSourceDialog()"> <span
							class="head-icon head-bar1"></span> <span class="headmenu-label">Add
								DataSource</span>
					</a></li>
					<li class="odd"><a class="dropdown-toggle"
						data-toggle="dropdown" data-target="#"
						onclick="openDeleteDataSourceDialog()"> <span
							class="head-icon head-bar2"></span> <span class="headmenu-label">Delete
								DataSource</span>
					</a></li>
				</ul>
				<!--headmenu-->
			</div>
		</div>

		<div class="leftpanel">

			<div class="leftmenu">

				<ul class="nav nav-tabs nav-stacked">
					<li class="nav-header">Navigation</li>
					<li class="active"><span class="iconfa-laptop"></span>
						Dashboard</li>
				</ul>
				<div id="firstSelect" style="padding: 18px">
					<select id="selectedDBID" onchange="selectedDB(this.value)">
						<c:forEach var="dbName" items="${DBLIST}">
							<option value="${dbName}">${dbName}</option>
						</c:forEach>
					</select>
				</div>

				<div id="secondSelect" style="padding: 18px"></div>

				<div id="main" style="font-size: 15px">

					<ul id="black">
					</ul>

				</div>
			</div>
			<!--leftmenu-->

			<div class="leftbottom">
				<div id="newQueryDrop"></div>
			</div>
			<!--leftbottom-->

		</div>
		<!-- leftpanel -->

		<div class="rightpanel">

			<ul class="breadcrumbs">

				<li>Add New XML Document Here >></li>

			</ul>

			<div class="pageheader">

				<table>
					<tr>
						<td style="padding: 0 15px 0 15px;"><label id="dataSourcelbl"
							style="float: left">No DataSource Selected</label> <input
							type="submit" value="Select DataSource to Add Document"
							onclick="openSelectDataSourceDialog()" style="float: left" /></td>
						<td style="padding: 0 15px 0 15px;">
							<form id="upload-form" class="upload-box" action="controller"
								method="post" enctype="multipart/form-data">
								<table cellpaddding="10">
									<tr>
										<td><input type="file" id="fileID" name="file1"
											disabled="true" /></td>
										<div id="upload-error" class="error">${uploadError}</div>
										<td><input type="submit" id="upload-button"
											value="Upload" style="margin-left: 5%;" disabled="true"
											onclick="blockUI()" /></td>
									</tr>
								</table>
							</form>
						</td>
						<td style="padding: 0 15px 0 15px;"><input type="button"
							value="Run" id="runBtn" onclick="loadFinalTree()" /></td>
					</tr>
				</table>

			</div>
			<!--pageheader-->

			<div class="maincontent">
				<div class="maincontentinner">
					<div class="row-fluid">

						<div id="menu_id" class="menus">
							<ul id="ul_id">

							</ul>
						</div>
						<!-- End of "menus" -->
						<div style="clear: both"></div>
						<div id="dashboard-left" class="span8">
							<h6 class="widgettitle">
								<span class="icon-comment icon-white"></span> Query Visual
							</h6>
							<div class="widgetcontent nopadding">
								<div id="valueSubmitDrop">
									<div id="visual">
										<div id="visual_1"></div>

										<div id="visual_2"></div>

										<div id="visual_3"></div>

										<div id="visual_4"></div>
									</div>
								</div>
							</div>

							<br />


						</div>
						<!--span8-->

						<div id="dashboard-right" class="span4">



							<div class="alert alert-block">
								<div id="valueResultID" style="font-size: 15px"></div>
							</div>
							<!--alert-->

							<br /> <br />

						</div>
						<!--span4-->
					</div>
					<!--row-fluid-->

					<div class="footer">
						<div class="footer-left">
							<span>&copy; 2013. MustBlend Web. All Rights Reserved.</span>
						</div>
						<div class="footer-right">
							<span>Designed by: <a href="http://www.andree-wijaya.com/">Andree
									Wijaya</a></span>
						</div>
					</div>
					<!--footer-->

					<div id="load-message">Please wait while document is loading
						....</div>

				</div>
				<!--maincontentinner-->
			</div>
			<!--maincontent-->

		</div>
		<!--rightpanel-->

	</div>
	<!--mainwrapper-->


</body>
</html>
